<template>
	<view class="practice-content">
		<view class="practice-box">
			<view class="topic-box">
				<view class="stem-box">
					<text class="stem-type">单选</text>
					<text class="stem-text"> 这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干这是题目题干</text>
					<text class="aloud-box">读题</text>
				</view>
				<view class="stem-select">
					<view class="select-item">
						<image src="../../static/index/selected.png" mode=""></image>
						<view>A.这是答案a选项的内容1</view>
					</view>
					<view class="select-item">
						<image src="../../static/index/selected.png" mode=""></image>
						<view>B.这是答案a选项的内容1</view>
					</view>
					<view class="select-item">
						<image src="../../static/index/selected.png" mode=""></image>
						<view>C.这是答案a选项的内容1</view>
					</view>
					<view class="select-item">
						<image src="../../static/index/selected.png" mode=""></image>
						<view>D.这是答案a选项的内容1</view>
					</view>
				</view>
				<view class="answer-box">
					<text>正确答案</text>
					<text class="right">A</text>
					<text>您的选择</text>
					<text class="you-select">A</text>
				</view>
			</view>

		</view>
		<view class="skill-explain">
			<view class="skill-title">
				技巧讲解
			</view>
			<view class="skill-subtitle">
				<image src="../../static/index/tmjx.png" mode=""></image>
				<view>题目解析</view>
			</view>
			<view class="explain-box">
				题目解析包含法律条文，题目解析包含法律条文题目解析包含法律条文题目解析包含法，律条文题目解析包含法律条文题目解析包含法律条文题目解析包含法律条。
			</view>
		</view>
		<view class="fun-box">
			<view class="fun-subbox">
				<view class="collect">
					<image src="../../static/index/collect.png" mode=""></image>
					<view>收藏</view>
				</view>
				<view class="current-topic" @click="showPopup">
					<image src="../../static/index/menu.png" mode=""></image>
					<view>30/2116</view>
				</view>
			</view>
			<view class="fun-subbox">
				<view class="up-topic">
					上一题
				</view>
				<view class="down-topic" @click="nextTopic">
					下一题
				</view>
			</view>
		</view>
		<u-popup v-model="topicShow" mode="bottom" border-radius="30" height="900rpx">
			<view class="fun-box1">
				<view class="fun-subbox">
					<view class="collect">
						<image src="../../static/index/collect.png" mode=""></image>
						<view>收藏</view>
					</view>
					<view class="current-topic" @click="showPopup">
						<image src="../../static/index/menu.png" mode=""></image>
						<view>30/2116</view>
					</view>
				</view>
				<view class="fun-subbox">
					<view class="up">
						<image src="../../static/index/selected.png" mode=""></image>
						<view>4</view>
					</view>
					<view class="up">
						<image src="../../static/index/错误.png" mode=""></image>
						<view>4</view>
					</view>
				</view>
			</view>
			<view class="topic-code">
				<view class="code-item" v-for="(item,index) in 100">
					{{index + 1}}
				</view>
			</view>
		</u-popup>
		<u-popup v-model="tipsShow" mode="center" border-radius="20" height="420rpx" width="600rpx">
			<view class="tips-box">
				<view class="tips-text">
					<image src="../../static/index/ts.png" mode=""></image>
					<view class="text">
						未付费学员（过客身份）有试用权限试用
					</view>
					<view class="num">
						试用<text>30</text>题
					</view>
				</view>
				<view class="btn-box">
					<view>暂不购买</view>
					<view class="green">购买课程</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topicShow: false,
				tipsShow: false
			}
		},
		onLoad(){
		},
		methods: {
			showPopup() {
				this.topicShow = true
			},
			nextTopic() {
				this.tipsShow = true
			},
		}
	}
</script>

<style lang="scss">
	.practice-box {
		// width: 95%;
		margin: 20rpx auto;
		padding: 30rpx;
		background-color: #fff;

		.stem-box {
			font-size: 22rpx;

			.stem-type {
				padding: 5rpx 10rpx;
				border-radius: 6rpx;
				color: #fff;
				background: linear-gradient(180deg, #66CCAD, #2AC092);
			}

			.stem-text {
				margin: 0 20rpx;
				font-size: 34rpx;
				line-height: 2;
			}

			.aloud-box {
				background-color: #D7F5EC;
				color: #2AC092;
				padding: 5rpx 10rpx;
				border-radius: 6rpx;
				border: 1rpx solid #8AE6CA;
			}
		}

		.stem-select {
			margin: 0 0 10rpx 0;

			.select-item {
				padding: 30rpx 0;
				display: flex;
				align-items: center;
				font-size: 32rpx;

				>image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 15rpx;
				}
			}
		}

		.answer-box {
			background-color: #F5F5F5;
			border-radius: 10rpx;
			padding: 20rpx;
			font-size: 34rpx;

			>text {
				margin-right: 30rpx;
			}

			.right {
				color: #2AC092;
			}

			.you-select {
				color: #FF6D6A;
			}
		}
	}

	.skill-explain {

		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;

		.skill-title {
			text-align: center;
			font-size: 40rpx;
			margin: 20rpx 0;
		}

		.skill-subtitle {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			>image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.explain-box {
			padding: 30rpx;
			border: 1rpx solid #E6E6E6;
			border-radius: 10rpx;
			line-height: 2;
		}
	}

	.fun-box {
		position: fixed;
		bottom: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		box-shadow: 0px 3rpx 20rpx 0px rgba(51, 51, 51, 0.1);
		border-radius: 48rpx;
		width: 96%;
		right: 2%;
		padding: 20rpx;
		font-size: 30rpx;
	}

	.fun-box1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 20rpx;
		font-size: 30rpx;
		border: 1rpx solid #E6E6E6;
	}

	.fun-subbox {
		display: flex;
	}

	.collect {
		display: flex;
		align-items: center;
		background: linear-gradient(180deg, #FFE3C4, #FFA07F, #FFC37F, #FFA23B);
		border-radius: 28rpx;
		padding: 10rpx 15rpx;
		width: max-content;
		margin-right: 20rpx;
		color: #fff;

		>image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.current-topic {
		display: flex;
		align-items: center;

		>image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}

	.up-topic {
		border: 1px solid #2AC092;
		border-radius: 30rpx;
		padding: 15rpx 30rpx;
		color: #2AC092;
		background-color: transparent;
		margin-right: 20rpx;
	}

	.down-topic {
		border: 1px solid #2AC092;
		border-radius: 30rpx;
		padding: 15rpx 30rpx;
		color: #fff;
		background: linear-gradient(180deg, #66CCAD, #2AC092);

	}

	.up {
		color: #000;
		margin-right: 20rpx;
		display: flex;
		padding: 0 20rpx;
		align-items: center;

		>image {
			margin-right: 10rpx;
			width: 36rpx;
			height: 36rpx;
		}
	}

	.topic-code {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx;
		justify-content: space-between;

		.code-item {
			width: 15%;
			padding: 32rpx;
			border-radius: 50%;
			background-color: #DEFCF3;
			color: #2AC092;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.tips-box {
		display: flex;
		flex-direction: column;
		height: 100%;

		.tips-text {
			flex: 3;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			color: #333333;
			font-size: 28rpx;
			padding: 20rpx 0;

			>image {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				margin: 30rpx 0;
			}

			.num {

				>text {
					font-size: 48rpx;
					color: #2AC092;
				}
			}
		}

		.btn-box {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: space-around;
			font-size: 32rpx;

			>view {
				height: 100%;
				border: 0.5px solid #E6E6E6;
				flex: 1;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.green {
				color: #2AC092;
			}
		}
	}
</style>